<template>
    <div class="home">
        <el-card>
            <div class="box">
                <img :src="userStore.user.avatar" alt="">
                <div class="userinfo">
                    <p class="username">欢迎 {{ userStore.user.nickname }}！</p>
                    <p class="title">{{ title }}</p>
                </div>
            </div>
        </el-card>
        <div class="welcome">
            <SvgIcon name="welcome" width="700" height="700"></SvgIcon>
        </div>
    </div>
</template>

<script setup lang="ts" name="Home">
import SvgIcon from '@/components/SvgIcon.vue';
import { useUserStore } from '@/store/user';
// import { ref } from 'vue';

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()

// const color = ref('#409EFF')
// const handleChangeColor = () => {
//     const el = document.documentElement
//     el.style.setProperty('--el-color-primary', color.value)
// }

// const darkFlag = ref(false)
// const darkChange = () => {
//     const html = document.documentElement
//     darkFlag.value ? html.className = 'dark' : html.className = ''
// }

</script>

<style scoped lang="scss">
.home {
    .el-card {
        min-width: 600px;
    }

    .box {
        display: flex;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 30px;
        }

        .userinfo {
            .username {
                font-size: 30px;
                font-weight: bold;
                margin: 10px 0 30px 0;
            }

            .title {
                font-style: italic;
                font-size: 20px;
                color: rgba(140, 140, 141, 0.445);
            }
        }
    }

    .welcome {
        margin-top: -100px;
        display: flex;
        justify-content: center;
        min-width: 600px;
    }
}
</style>
